<template>
  <dys-modal
    :open="open"
    :title="t('Function Management')"
    :confirm-loading="loading"
    @cancel="emit('cancel')"
    @ok="handleSubmit"
    :width="1000"
  >
    <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
      <a-row>
        <a-col :span="12">
          <a-form-item
            :label="t('功能名称')"
            v-bind="validateInfos.functionName"
          >
            <a-input
              v-model:value="modelRef.functionName"
              :placeholder="t('请输入功能名称')"
              allow-clear
            ></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item
            :label="t('功能编码')"
            v-bind="validateInfos.functionCode"
          >
            <a-input
              v-model:value.trim="modelRef.functionCode"
              :placeholder="t('请输入功能编码')"
              @change="handleUpperCase"
              allow-clear
            ></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item
            :label="t('功能图标')"
            v-bind="validateInfos.functionIcon"
          >
            <select-icon
              v-model:value="modelRef.functionIcon"
              :placeholder="t('请选择功能图标')"
            ></select-icon>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item
            :label="t('发布状态')"
            v-bind="validateInfos.publishStatus"
          >
            <a-select
              :value="modelRef.publishStatus"
              :options="[
                { label: '已发布', value: 'Y' },
                { label: '未发布', value: 'N' },
              ]"
              disabled
            ></a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item
            :label="t('国际化名称')"
            v-bind="validateInfos.localeKey"
          >
            <a-input
              v-model:value="modelRef.localeKey"
              :placeholder="t('请输入国际化名称')"
              allow-clear
            ></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item
            :label="t('功能描述')"
            :label-col="{ span: 3 }"
            :wrapper-col="{ span: 21 }"
          >
            <a-textarea
              v-model:value="modelRef.functionDesc"
              :placeholder="t('请输入功能描述')"
              :rows="2"
              allow-clear
            ></a-textarea>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </dys-modal>
</template>
<script lang="ts" setup>
import { pick } from "lodash";
import { useI18n } from "vue-i18n";
import { reactive, ref, watch } from "vue";
import { Form, message } from "ant-design-vue";
import { add, update } from "@/api/low-code/function";
import type { FormRule } from "@/typing";
import type {
  FunctionParams,
  QueryResult,
} from "@/api/low-code/function/typing";
import SelectIcon from "@/components/select-icon/index.vue";
interface Props {
  /**弹窗 */
  open: boolean;
  /**行数据 */
  model: QueryResult;
}
const props = defineProps<Props>();
const emit = defineEmits(["cancel", "ok"]);
const { t } = useI18n();
const initValue = (): FunctionParams => ({
  functionId: null,
  functionName: null,
  functionCode: null,
  functionDesc: null,
  functionIcon: null,
  publishStatus: "N",
  localeKey: null,
});
const modelRef = reactive(initValue());
const modelRule = reactive<FormRule<FunctionParams>>({
  functionName: [{ required: true, message: () => t("请输入功能名称") }],
  functionCode: [{ required: true, message: () => t("请输入功能编码") }],
  functionIcon: [{ required: true, message: () => t("请选择功能图标") }],
  localeKey: [{ required: true, message: () => t("请输入国际化名称") }],
});
const { validate, validateInfos, resetFields } = Form.useForm(
  modelRef,
  modelRule
);
watch([() => props.model, () => props.open], ([model]) => {
  resetFields(pick(model || initValue(), Object.keys(modelRef)));
});
const loading = ref(false);
/**功能编码转大写 */
const handleUpperCase = () => {
  modelRef.functionCode = modelRef.functionCode.toUpperCase();
};
/**提交 */
const handleSubmit = async () => {
  try {
    await validate();
  } catch {
    return message.warning(t("校验失败"));
  }
  loading.value = true;
  const { success } = await (props.model?.functionId ? update : add)(modelRef);
  loading.value = false;
  if (success) {
    message.success(props.model?.functionId ? t("修改成功") : t("新增成功"));
    emit("ok");
    emit("cancel");
  }
};
</script>
